<template>
  <div>
  App.vue
  <!--.vue结尾的文件 称为组件-->
  <!--vue文件解构 划分成三个部分-->
  <!--template 模板 写html元素 页面结构-->
  <!--<div>=====Demo=====</div>
  <Demo></Demo>

  <div>=====Demo01=====</div>
  <Demo1></Demo1>

  <div>=====Demo02=====</div>
  <Demo2></Demo2>-->

  <div>=====Demo03=====</div>
  <Demo3></Demo3>

  <div>=====Demo04=====</div>
  <Demo4 v-if="flag"></Demo4>
  <button @click="flag = !flag">改变flag</button>

  <div>=====Demo05=====</div>
  <Demo5></Demo5>

  </div>
</template>

<script setup>
//处理页面行为
//引入
import Demo from './views/demo.vue';
import Demo1 from './views/demo1.vue';
import Demo2 from './views/demo2.vue';
import Demo3 from './views/demo3.vue';
import Demo4 from './views/demo4.vue';
import Demo5 from './views/demo5.vue';

import {ref} from 'vue'
const flag = ref(true)
</script>

<style scoped>
/*样式*/
/*div*/
</style>